<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>尚品汇 - 商品详情页</title>
  <link rel="stylesheet" href="./css/index.css">
</head>

<body>
  <div id="root">
    <!-- 顶部导航 start -->
    <div id="top">
      <!-- 版心 -->
      <div class="container">
        <!-- 左侧欢迎与登录 -->
        <div class="left">
          <!-- 欢迎 -->
          <div class="welcome">欢迎来到尚品汇！ 请</div>
          <div class="login">
            <a href="#">登录</a>
            <a href="#">注册</a>
          </div>
        </div>

        <!-- 右侧导航链接 -->
        <ul class="right">
          <li><a href="#">我的订单</a></li>
          <li><a href="#">我的购物车</a></li>
          <li><a href="#">我的尚品汇</a></li>
          <li><a href="#">尚品汇会员</a></li>
          <li><a href="#">企业采购</a></li>
          <li><a href="#">关注尚品汇</a></li>
          <li><a href="#">合作招商</a></li>
          <li><a href="#">商家后台</a></li>
        </ul>
      </div>
    </div>
    <!-- 顶部导航 end -->

    <!-- logo 与搜索区域 start -->
    <div id="logo-search-section">
      <!-- 版心 -->
      <div class="container">
        <!-- 左侧logo -->
        <div class="logo">
          <img src="./images/Logo.png" alt="">
        </div>

        <!-- 右侧搜索框 -->
        <div class="search">
          <input type="text" placeholder="请输入搜索内容">
          <button>搜索</button>
        </div>
      </div>
    </div>
    <!-- logo 与搜索区域 end -->

    <!-- 主体导航 start -->
    <div id="nav">
      <!-- 版心 -->
      <div class="container">
        <ul>
          <li><a href="#">全部商品分类</a></li>
          <li><a href="#">服装城</a></li>
          <li><a href="#">美妆馆</a></li>
          <li><a href="#">尚品汇超市</a></li>
          <li><a href="#">全球购</a></li>
          <li><a href="#">闪购</a></li>
          <li><a href="#">团购</a></li>
          <li><a href="#">有趣</a></li>
          <li><a href="#">秒杀</a></li>
        </ul>
      </div>
    </div>
    <!-- 主体导航 end -->

    <!-- 主体内容  start-->
    <div id="content">
      <!-- 版心 -->
      <div class="container">
        <!-- 路径导航 -->
        <div class="breadcrumb">
          
        </div>

        <!-- 放大镜与商品介绍区域 -->
        <div class="goods-intro-section">
          <!-- 左侧放大镜部分 -->
          <div class="left">
            <!-- 上半部分图片 -->
            <div class="small-img">
              <!-- 小图 -->
              <img src="" alt="">
              <!-- 遮罩元素 -->
              <div class="mask"></div>
              <!-- 大图容器 -->
              <div class="big-img">
                <img src="" alt="">
              </div>
            </div>

            <!-- 下半部分缩略图 -->
            <div class="thumbnails-section">
              <!-- 上一个 -->
              <div class="prev btn">&lt;</div>

              <!-- 缩略图部分 -->
              <div class="thumbnails">
                <ul>
                  <!-- <li><img src="./images/s1.png" alt=""></li>
                  <li><img src="./images/s1.png" alt=""></li>
                  <li><img src="./images/s1.png" alt=""></li>
                  <li><img src="./images/s1.png" alt=""></li>
                  <li><img src="./images/s1.png" alt=""></li>
                  <li><img src="./images/s1.png" alt=""></li> -->
                </ul>
              </div>

              <!-- 下一个 -->
              <div class="next btn">&gt;</div>
            </div>
          </div>

          <!-- 右侧商品信息 -->
          <div class="right">
            <!-- 基本信息区域 -->
            <div class="basic-info-section">
              
            </div>

            <!-- 选中属性标签区域 -->
            <div class="choosed-section">
              <!-- <div class="mark"><span>银色</span><span>X</span></div> -->
            </div>

            <!-- 商品属性选择区域 -->
            <div class="choose-section">
              <!-- <dl>
                <dt>选择颜色</dt><dd class="active">金色</dd><dd>银色</dd><dd>黑色</dd>
              </dl>
              <dl>
                <dt>内存容量</dt><dd class="active">16G</dd><dd>64G</dd><dd>128G</dd><dd>256G</dd>
              </dl>
              <dl>
                <dt>选择版本</dt><dd class="active">公开版</dd><dd>移动版</dd>
              </dl>
              <dl>
                <dt>购买方式</dt><dd class="active">官方标配</dd><dd>优惠移动版</dd><dd>电信优惠版</dd>
              </dl> -->
            </div>

            <!-- 数量与加购 -->
            <div class="num-cart">
              <!-- 数量调整区域 -->
              <div class="num-input">
                <input type="text" value="1">
                <div class="add">+</div>
                <div class="sub">-</div>
              </div>

              <!-- 加入购物车按钮 -->
              <button>加入购物车</button>
            </div>

          </div>
        </div>

        <!-- 相关推荐与商品详情 -->
        <div class="related-goods-info">
          <!-- 左侧相关分类结果 -->
          <div class="left">
            <!-- 标签页头部结构 -->
            <div class="tab-headers">
              <!-- 单个的标签页元素 -->
              <div class="item active">相关分类</div>
              <div class="item">推荐品牌</div>
            </div>

            <!-- 标签页主体内容 -->
            <div class="tab-content">
              <div class="item active">
                <!-- 相关分类 -->
                <ul class="related-cates">
                  <li>手机</li>
                  <li>手机壳</li>
                  <li>内存卡</li>
                  <li>iphone配件</li>
                  <li>贴膜</li>
                  <li>手机耳机</li>
                  <li>移动电源</li>
                  <li>平板电脑</li>
                </ul>

                <!-- 相关商品 -->
                <ul class="related-goods">
                  <li>
                    <img src="./images/part01.png" alt="">
                    <p>Apple苹果iPhone 6s (A1699)</p>
                    <div class="price">¥6088.00</div>
                    <div class="btn">
                      <button>加入购物车</button>
                    </div>
                  </li>
                  <li>
                    <img src="./images/part02.png" alt="">
                    <p>Apple苹果iPhone 6s (A1699)</p>
                    <div class="price">¥6088.00</div>
                    <div class="btn">
                      <button>加入购物车</button>
                    </div>
                  </li>
                  <li>
                    <img src="./images/part03.png" alt="">
                    <p>Apple苹果iPhone 6s (A1699)</p>
                    <div class="price">¥6088.00</div>
                    <div class="btn">
                      <button>加入购物车</button>
                    </div>
                  </li>
                  
                </ul>

              </div>
              <div class="item">
                推荐品牌
              </div>
            </div>

          </div>

          <!-- 搭配与商品详情 -->
          <div class="right">
            <!-- 搭配区域 -->
            <div class="dapei-section">
              <!-- 搭配标题 -->
              <div class="header">
                选择搭配
              </div>

              <!-- 搭配的商品 -->
              <div class="dapeis">
                <!-- 当前商品信息 -->
                <div class="self">
                  <img src="./images/l-m01.png" alt="">
                  <p></p>
                  <!-- 加号元素 -->
                  <div class="plus">+</div>
                </div>

                <!-- 搭配商品 -->
                <ul class="dapei-goods">
                  <li>
                    <img src="./images/dp01.png" alt="">
                    <p>电脑 USB 灯</p>
                    <div>
                      <label><input type="checkbox" value="10"> <span>10</span></label>
                    </div>
                  </li>
                  <li>
                    <img src="./images/dp02.png" alt="">
                    <p>手机支架</p>
                    <div>
                      <label><input type="checkbox" value="49"> <span>49</span></label>
                    </div>
                  </li>
                  <li>
                    <img src="./images/dp03.png" alt="">
                    <p>Feless费勒斯VR</p>
                    <div>
                      <label><input type="checkbox" value="200"> <span>200</span></label>
                    </div>
                  </li>
                  <li>
                    <img src="./images/dp04.png" alt="">
                    <p>Feless费勒斯VR</p>
                    <div>
                      <label><input type="checkbox" value="150"> <span>150</span></label>
                    </div>
                  </li>
                </ul>

                <!-- 统计 -->
                <div class="checkout">
                  <!-- 已购数量 -->
                  <p class="total">已购 <span>0</span> 件商品</p>
                  <!-- 套餐价 -->
                  <div class="tcj">套餐价</div>
                  <!-- 价格 -->
                  <div class="price">¥5299</div>
                  <!-- 按钮 -->
                  <button>加入购物车</button>
                </div>
              </div>
            </div>

            <!-- 商品详情 -->
            <div class="goods-detail">
              <!-- 标签页头部 -->
              <ul class="tab-header">
                <li class="active"><a href="#">商品介绍</a></li>
                <li><a href="#">规格包装</a></li>
                <li><a href="#">售后与保障</a></li>
                <li><a href="#">商品评价</a></li>
                <li><a href="#">手机社区</a></li>
              </ul>

              <!-- 标签页内容 -->
              <ul class="tab-content">
                <li>
                  <!-- 商品参数 -->
                  <ul>
                    <li>分辨率：1920*1080(FHD)</li>
                    <li>后置摄像头：1200万像素</li>
                    <li>前置摄像头：500万像素</li>
                    <li>核 数：其他</li>
                    <li>频 率：以官网信息为准</li>
                    <li>品牌： Apple</li>
                    <li>商品名称：APPLEiPhone 6s Plus</li>
                    <li>商品编号：1861098</li>
                    <li>商品产地：中国大陆</li>
                    <li>商品毛重：0.51kg</li>
                    <li>热点：指纹识别，Apple Pay，金属机身，拍照神器</li>
                    <li>系统：苹果（IOS）</li>
                    <li>像素：1000-1600万品毛重：0.51kg</li>
                    <li>机身内存：64GB</li>
                  </ul>
                  <!-- 商品大图 -->
                  <img src="./images/intro01.png" alt="">
                  <img src="./images/intro02.png" alt="">
                  <img src="./images/intro03.png" alt="">
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 主体内容  end-->

    <!-- 抽屉菜单 start -->
    <div id="drawer" class="closed">
      <!-- 主体内容容器 -->
      <div class="main"></div>

      <!-- 左上角按钮图标 -->
      <div class="top-icon"></div>

      <!-- 列表菜单 -->
      <ul class="list-menu">
        <li><p>尚品会员</p></li>
        <li><p>尚品会员</p></li>
        <li><p>尚品会员</p></li>
        <li><p>尚品会员</p></li>
        <li><p>尚品会员</p></li>
        <li><p>尚品会员</p></li>
      </ul>
    </div>
    <!-- 抽屉菜单 end -->
  </div>

  <script src="./js/data.js"></script>
  <script src="./js/index.js"></script>
</body>

</html>